<!DOCTYPE html>
<html>
	<head>
		<title>数据管理</title>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 所有的 css & js 资源 -->
		<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../static/sa.css">
		
		<script src="../../static/kj/vue.min.js"></script>
		<script src="../../static/kj/axios.min.js"></script>
		<script src="../../static/kj/element-ui/index.js"></script>
		<script src="../../static/kj/jquery.min.js"></script>
		<script src="../../static/kj/layer/layer.js"></script>

		<script src="../../static/sa.js"></script>
		<script src="../../sa-resources/config.js"></script>

		<style type="text/css">
			.demo-table-expand {
				font-size: 0;
			}

			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 100%;
				border-bottom: 1px #eeeeee solid;
			}
		</style>
	</head>
	<body>
		<div class="vue-box" style="display: none;" :style="'display: block;'">
			<div class="c-panel">
				<!-- ------------- 参数栏 ------------- -->
				<div class="c-title">检索参数</div>
				<el-form>
					<div class="c-item">
						<label class="c-label">分词查询：</label>
						<el-input size="mini" v-model="queryParams[0].right[0]" placeholder="如世界 word 你好 hello "></el-input>
					</div>
					<div class="c-item">
						<label class="c-label">审核状态：</label>
						<el-select size="mini" v-model="queryParams[1].right[0]" placeholder="请选择">
							<el-option label="全部" value=""></el-option>
							<el-option v-for="(item, index) in cfgStatusArray" :key="index" :label="item.value"
								:value="item.key">
							</el-option>
						</el-select>
					</div>

					<div class="c-item" style="min-width: 0px;">
						<el-button size="mini" type="primary" icon="el-icon-search" @click="params.page = 1; f5()">查询
						</el-button>
					</div>
				</el-form>

				<!-- ------------- 快捷按钮 ------------- -->
				<div class="fast-btn">
					<el-button size="mini" type="primary" icon="el-icon-plus" @click="add()">新增</el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteByIds()">批量删除</el-button>
					<el-button size="mini" type="warning" icon="el-icon-download"
						@click="sa.exportExcel('.wuyan-table')">导出</el-button>
					<el-button size="mini" type="info" icon="el-icon-refresh" @click="sa.f5()">重置</el-button>
				</div>

				<!-- ------------- 数据列表 ------------- -->
				<el-table :data="dataList" size="small" ref="data-table" class="wuyan-table" max-height="600"
					@row-click="handleRowChange" highlight-current-row>
					<el-table-column type="expand">
						<template slot-scope="props">
							<el-form label-position="left" inline class="demo-table-expand">
								<el-row style="height:100%">
									<el-col v-for="(item, index) in formData.fields" :key="'expand-' + index" :md="24"
										:lg="12">
										<el-form-item :label="item.__config__.label"
											v-if="!item.__config__.queryMainShow"
											:label-width="item.__config__.labelWidth ? item.__config__.labelWidth : '150px'">
											<span>{{ props.row[item.__vModel__] }}</span>
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</template>
					</el-table-column>

					<el-table-column align="center" type="selection" width="45px"></el-table-column>

					<el-table-column type="index" align="center" label="序号" width="50"></el-table-column>

					<el-table-column v-for="(item, index) in formData.fields" :key="'main-' + index" align="center" :show-overflow-tooltip="true"
						:label="item.__config__.label" :prop="item.__vModel__" v-if="item.__config__.queryMainShow">
					</el-table-column>

					<el-table-column align="center" :formatter="getCfgStatusValue" label="审核状态" prop="cfg_status">
					</el-table-column>

					<el-table-column align="center" label="更新时间" prop="operate_time">
						<template slot-scope="s">
							<span>{{timestampToTime(s.row.operate_time)}}</span>
						</template>
					</el-table-column>
					

					<el-table-column align="center" label="操作" width="240px" fixed="right">
						<template slot-scope="s">
							<el-button v-if="!s.row.cfg_status || s.row.cfg_status=='0' || s.row.cfg_status=='3'" class="c-btn" type="success"
								icon="el-icon-document-checked" @click.stop="submit(s.$index, s.row)">提交
							</el-button>

							<el-button v-if="s.row.cfg_status == '4'" class="c-btn" type="success" icon="el-icon-back"
								@click.stop="cancelSubmit(s.$index, s.row)">撤销
							</el-button>

							<el-button class="c-btn" type="primary" icon="el-icon-edit" @click.stop="update(s.row)">修改
							</el-button>

							<el-button class="c-btn" type="danger" icon="el-icon-delete" @click.stop="del(s.row)">删除
							</el-button>
						</template>
					</el-table-column>

				</el-table>

				<!-- ------------- 分页 ------------- -->
				<div class="page-box">
					<el-pagination background layout="total, prev, pager, next, sizes, jumper"
						:current-page.sync="params.page" :page-size.sync="params.limit" :total="dataList.length"
						:page-sizes="[15,30,50,100,500,1000]" @current-change="f5()" @size-change="f5()">
					</el-pagination>
				</div>
			</div>
		</div>

		<script src="../../sa-resources/api.js"></script>
		<script src="../../sa-resources/wuyan.js"></script>
		<script src="../../sa-resources/element-ui-helper.js"></script>

		<script>
			var app = new Vue({
				el: '.vue-box',
				data: {
					// 表单ID
					formId: parseInt(sa.p('id', -1)),
					formRef: sa.p('form', ''),
					// 表单数据
					formData: {},
					// 请求参数  
					params: {
						params: '',
						page: 1,
						limit: 15
					},
					// 查询参数
					queryParams: [{
							left: 'cfg_tags',
							op: 'text',
							right: ['']
						},
						{
							left: 'cfg_status',
							op: 'eq',
							right: ['']
						},
					],
					// 当前数据
					dataList: [],
					// 数据量
					dataCount: 0,
					// 选中参数
					chooseData: {
						row: null,
						field: null,
					},
					cfgStatusArray: []
				},
				created: function() {
					this.init();
				},
				methods: {
					init() {
						axiosConfig(axios)
						this.cfgStatusArray = this.convertCfgStatus2Array()

						if(this.formId > 0){
							let loading = elLoadding({
								that: this
							})
							
							let url = getUrl('pub-form', 'getOne', [this.formId])
							let http = getHttp(axios, 'pub-form', 'getOne')
							http(url, {}).then(res => {
								res.fields = JSON.parse(res.fields)
							
								this.formData = res
								this.f5();
								sa.onInputEnter(); // 监听输入框的回车事件，执行查询  
								loading.close();
							}).catch((err) => { // 请求失败处理
								sa.error(err.msg);
								loading.close();
							});
						}else if(this.formRef){
							let loading = elLoadding({
								that: this
							})
							
							let params = queryParamsToJsonStr([
								{
									left: 'formRef',
									op: 'eq',
									right: [this.formRef]
								}
							])
							params = {
								limit: 1,
								params: params,
							}
							
							let url = getUrl('pub-form', 'list')
							let http = getHttp(axios, 'pub-form', 'list')
							http(url, {
								params: params
							}).then(res => {
								if(res.list && res.list.length > 0){
									res.list[0].fields = JSON.parse(res.list[0].fields)
																
									this.formData = res.list[0]
									this.f5();
									sa.onInputEnter(); // 监听输入框的回车事件，执行查询  
								}
								
								loading.close();
							}).catch((err) => { // 请求失败处理
								sa.error(err.msg);
								loading.close();
							});
						}else {
							sa.error('未指定表单')
						}
					},

					// 刷新
					f5: function() {
						this.params.params = queryParamsToJsonStr(this.queryParams)

						let loading = elLoadding({
							that: this
						})

						axios.get('/form/api/' + this.formData.formRef, {
								params: this.params
							})
							.then(res => {
								this.dataList = res.list ? res.list : []; // 数据
								this.dataCount = res.count; // 分页
								sa.f5TableHeight(); // 刷新表格高度 

								loading.close();
							})
							.catch((err) => { // 请求失败处理
								this.$notify.info({
									title: '消息',
									message: '初始化数据失败'
								});

								loading.close();
							});
					},

					// 提交
					submit(index, data) {
						let loading = elLoadding({
							that: this
						})

						data.cfg_status = '4'
						this.$set(this.dataList, index, data)

						let url = getUrl('form-data', 'edit', {
							form: this.formData.formRef,
							id: data.id
						})
						let http = getHttp(axios, 'form-data', 'edit')
						http(url, {
							cfg_status: data.cfg_status
						}).then(res => {
							sa.ok('已提交')
							loading.close();
						}).catch((err) => { // 请求失败处理
							sa.error(err.msg);
							loading.close();
						});
					},

					// 撤销
					cancelSubmit(index, data) {
						let loading = elLoadding({
							that: this
						})
						
						data.cfg_status = '0'
						this.$set(this.dataList, index, data)
						
						let url = getUrl('form-data', 'edit', {
							form: this.formData.formRef,
							id: data.id
						})
						let http = getHttp(axios, 'form-data', 'edit')
						http(url, {
							cfg_status: data.cfg_status
						}).then(res => {
							sa.ok('已撤销')
							loading.close();
						}).catch((err) => { // 请求失败处理
							sa.error(err.msg);
							loading.close();
						});
					},

					// 新增数据
					add() {
						sa_admin.showTab({
							id: 'form-data-' + this.formData.id,
							name: this.formData.name + '(新增数据)',
							url: getFormUrl({
								path: 'index.html',
								params: 'id=' + this.formData.id + '&op=run&tab=form-data-' + this
									.formData.id,
								position: '/show'
							})
						});
					},

					// 修改
					update: function(data) {
						sa_admin.showTab({
							id: 'form-data-update-' + data.id,
							name: data.id + '(修改数据)',
							url: getFormUrl({
								path: 'index.html',
								params: 'id=' + this.formData.id + '&dataId=' + data.id +
								'&op=run&tab=form-data-update-' + data.id,
								position: '/show'
							})
						});
					},

					// 删除
					del: function(data) {
						sa.confirm('是否删除，此操作不可撤销', function() {
							let loading = elLoadding({
								that: this
							})

							axios.delete('/form/api/' + this.formData.formRef + '/' + data.id)
								.then(res => {
									sa.arrayDelete(this.dataList, data);
									sa.ok('删除成功');

									loading.close()
								})
								.catch(function(err) { // 请求失败处理
									this.$notify.info({
										title: '消息',
										message: '操作失败'
									});

									loading.close()
								});
						}.bind(this));
					},

					// 批量删除
					deleteByIds: function() {
						// 获取选中元素的id列表
						let selection = this.$refs['data-table'].selection;
						let ids = sa.getArrayField(selection, 'id');
						if (selection.length == 0) {
							return sa.msg('请至少选择一条数据')
						}

						// 提交删除 
						sa.confirm('是否删除，此操作不可撤销', function() {
							let loading = elLoadding({
								that: this
							})

							axios.delete('/form/api/' + this.formData.formRef + '/' + ids.toString())
								.then(res => {
									sa.arrayDelete(this.dataList, selection);
									sa.ok('删除成功');

									loading.close()
								})
								.catch(function(err) { // 请求失败处理
									this.$notify.info({
										title: '消息',
										message: '操作失败'
									});

									loading.close()
								});
						}.bind(this));
					},

					// 获取状态标识的含义
					getCfgStatusValue: function(data, column) {
						let res = baseConfig.formData.cfgStatus[data['cfg_status']]
						return res ? res : '未提交'
					},

					// 行单击事件
					handleRowChange(row, event, column) {
						this.$refs['data-table'].toggleRowExpansion(row)
					},

					// 将json格式的配置转化为数组
					convertCfgStatus2Array() {
						let res = []
						for (let key in baseConfig.formData.cfgStatus) {
							let item = {
								key: key,
								value: baseConfig.formData.cfgStatus[key]
							}
							res.push(item)
						}

						return res
					},
				}
			})
		</script>
	</body>
</html>
